<script setup>
import { ref } from 'vue'

import { ElMessage } from 'element-plus';
import a11Img from '@/assets/touxiang.jpg'
import breadcrumb from '@/components/breadcrumb.vue'
import router  from '../router';

const isCollapse = ref(true)
// 获取父组件传递过来的数据 
const showIcon = defineProps({
    isCollapse: Boolean
})

// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])

// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
    emit('changeAside')
}

// 登出按钮
const LogOut = ()=>{
    localStorage.removeItem('happyuser');
    router.replace('/login');
}

const person = ()=>{
    router.replace('/person');
}
const password = ()=>{
    router.replace('/password');
}

// 定义响应式数据
const user = ref(JSON.parse(localStorage.getItem('happyuser') || '{}'));

</script>

<template>
    <div>
        <el-header style="display: flex;font-size: 16px;">
            <div style="display: inline-flex; align-items: center;justify-content: left;">
                <el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Fold />
                </el-icon>
                <el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Expand />
                </el-icon>
            </div>
            
            <breadcrumb />

            <div class="toolbar"  >
                <div class="block" style="margin-right: 10px;">
                    <el-avatar :size="40" :src="user.avatar || a11Img" />
                </div>
                <span>{{user?.name ?? '游客' }}</span>
                <el-dropdown trigger="click">
                    <el-icon style="margin-left: 18px; margin-top: 1px;color: #303133;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="person">个人信息</el-dropdown-item>
                            <el-dropdown-item @click="password">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
    </div>
</template>

<style>
.el-header {
    width: 100%;
    background-color: ghostwhite;
    color: var(--el-text-color-primary);
    box-shadow: var(--el-box-shadow);
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    text-align: right;
}

.el-dropdown-menu__item {
    width: 120px;
}

.icon-color {
    color: white;
}</style>